@charset "utf-8";
@import "reset";
$fs:64px;
html{
    font-size: $fs;
}
@function r($px){
    @return $px/$fs*1rem; 
}

section{
    margin: 0 auto;
    .demo{
        width: r(583px);
        margin: auto;
        margin-top: r(30px);
        padding-bottom: r(20px);
        border-bottom: r(1px) solid #e2e2e2;
        .demo-f{
            width: r(325px);
            font-size: 0;
            text-align: justify;
            span{
                font-size: r(24.86px);
                }
            .time{
                margin-top: r(12px);
                .time-f{
                    span{font-size: 0;}
                    span{
                        font-size: r(18px);
                        color: #c5c5c5;
                        a{
                         font-size: r(18px);
                         color: #c5c5c5;   
                        }
                    }
                }
                .time-r{
                    font-size: 0;
                    margin-top: r(-4px);
                    span:first-of-type{
                        font-size: r(19.53px);
                         color: #c5c5c5;   
                    }
                    span:nth-of-type(2){
                        font-size: r(21.31px);
                         color: #c5c5c5;   
                    }
                }
            }
            
        }
        .demo-r{
            widows: r(208px);
            height: r(118px);
            >img{
                width: r(208px)
            }
        }
    }
    .demo1{
        border: none;
        padding-bottom: 0;
        margin-top: r(17px);
    }
    .strip{
        width: 100%;
        margin-top: r(35px);
        height: r(25px);
        background: #f5f5f5;
    }
    .demodemo{
        width: r(583px);
        margin: r(35px) auto 0;
        >p{
            font-size: r(24.86px);
            color: #323232;
        }
        .demodemo-pi{
            margin-top: r(20px);
            >div{
                width: r(188px);
                height: r(123px);
                >img{
                    width: r(188px);
                }
            }
            div+div{
                margin-left: r(8px);
            }
        }
        .comment{
            margin-top: r(12px);
            .comment-f{
                font-size: 0;
                >img{
                    width: r(27px);
                    height: r(27px);
                    vertical-align: r(-2px);
                }
                >a{
                    font-size: r(15.98px);
                    color: #c5c5c5;
                }
                >span{
                    font-size: r(19.53px);
                    color: #c5c5c5;
                }
            }
            .comment-r{
                font-size: 0;
                color: #c5c5c5;
                >span:first-of-type{
                    font-size: r(19.53px);
                }
                >span:nth-of-type(2){
                    font-size: r(21.31px);
                }
            }
            a{
                margin-left: r(10px);
            }
            span{
                margin-left: r(4px);
            }
        }
    }
}
//section制作
//热搜页面
.hot-search{
    width: 100%;
    height: 100%;
    background: #f1f1f1;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .5s;
    transform: translate3d(0,-100%,0);
    .s-key{
        width: r(583px);
        margin: r(30px) auto;
        >h1{
            font-size: r(26.63px);
            color: #211d1d;
            }
        .s-keyword{
            margin-top: r(10px);
            >div{
                height: r(56px);
                padding: 0 r(18px);
                line-height: r(56px);
                font-size: r(29.23px);
                color: #8b8b8b;
                background: #fff;
                border: r(1px) solid #e4e4e4;
                a{
                  color: #8b8b8b;  
                }
            }
            >div+div{
                margin-left: r(8px);
            }
        }
}
}
input[type="checkbox"]{
    display: none;
}
#search-page:checked+.hot-search{
    transform: translate3d(0,0,0);
    position: fixed;
    top: 0;left: 0;
    z-index: 999;
}
//热搜页面
//登录注册-未登录  
.login{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .5s;
    transform: translate3d(-100%,0,0);
    background: #1f1f1f;
.percen{
    background: #1f1f1f;
.headportrait-wrap{
    width: r(583px);
    margin: 0 auto;
    text-align: center;
    border-top: r(1px) solid #484848;
    .headportrait{
        margin-top: r(86px);
        text-align: center;
        >img{
            width: r(129px);
            height: r(129px);
        }
    }
    >p:first-of-type{
        font-size: r(24.86px);
        a{
          color: #fff;  
        }
    }
    >p:last-of-type{
        font-size: r(19.53px);
        a{
          color: #525252; 
          text-decoration: underline; 
        }
    }
}
.classify{
    border-top: r(23px) solid #303030;
    margin-top: r(62px);
    .classify-wrap{
        width: r(583px);
        margin: r(22px) auto 0;
        color: #fff;
        .gimc{
            width: 100%;
            display: block;
            border-bottom: r(1px) solid #2c2c2c;
            cursor:pointer;
             >p{
                display: inline-block;
                font-size: r(23.08px);
                color: #fff;
                width: r(540px);
            }
            >i{
                font-size: r(23.08px);
            }
        }   
    }
}
}
}
#login-page:checked+.login{
    transform: translate3d(0,0,0);
    position: fixed;
    top: 0;left: 0;
    z-index: 999;
}
//登录注册-未登录  